<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
                    <div class="row full-width">
                        <div class="columns">
                            <div class="large-12 medium-14 small-16 large-centered medium-centered small-centered columns">
                                <!--content-->
								<br>
                                <div class="row collapse">
									<div class="large-3 columns" id="heightOfPanel">
										<dl class="tabs vertical" data-tab>
											<dd class="inactive"><a class="vertical-inactive-tab" href="${pageContext.request.contextPath}/account/profile.html">MY PROFILE</a>
											</dd>
											<dd class="active"><a class="vertical-active-tab" href="${pageContext.request.contextPath}/account/notification-center.html">NOTIFICATION CENTER</a>
											</dd>
										</dl>
										<br>
									</div>
									<div class="large-8 medium-12 left profile-panel columns background-secondary" id="borderOfPanel">
<!-- 										<form> -->
											<br>
											<div class="row">
												<div class="columns" id="listNotificationCenter">
												
												<!-- Start For Task Each -->
													<c:forEach var="notification" items="${taskNotifications}" varStatus="theCount">
													<form action="${pageContext.request.contextPath}/subscribe/link-to-task.html" method="post" id="notyform-${notification.taskId}">
														<div class="row" id="divNoty">
														<input type="hidden" value="${notification.taskId}" name="taskId"/>
																<c:choose>
																	<c:when test="${notification.isRead == 0}">																																
																		<div class="border-blue notification-center-message-background-unread columns" name="notificationElement">
																	</c:when>																
																	<c:otherwise>
																		<div class="border-blue notification-center-message-background-read columns" name="notificationElement">
																	</c:otherwise>
																</c:choose>		
																<br>
																<div class="small-1 un-padding columns">
																	<i class="fa fa-tasks"></i>														
																</div>
																<div class="small-14 un-padding columns">
																			<span class="notification-center-message" onclick="submitToTask('${notification.taskId}','${notification.id}', this)"><a>Task <strong>${notification.taskName}</strong> has found flights : ${notification.taskInfo}</a></span>
																			<br>
																			<span class="notification-center-time">${notification.driffTime}</span>										
																		</div>															
																<div class="small-1 un-padding columns">																
																	<a href="#"><i class="fa fa-trash-o" onclick="requestToDeleteOneTask('${notification.id}',this)" id="iconTrash"></i></a>
																</div>													
															</div>														
														</div>
													</form>
													</c:forEach>
													
												<!-- End For Task Each -->
												
												<!-- Start For Each -->
													<c:forEach var="notification" items="${notifications}" varStatus="theCount">
													<form action="${pageContext.request.contextPath}/subscribe/link-to-subscribe.html" method="post" id="notyform-${notification.flightId}">
														<div class="row" id="divNoty">
														<input type="hidden" value="${notification.flightId}" name="flightId"/>
																<c:choose>
																	<c:when test="${notification.isRead == 0}">																																
																		<div class="border-blue notification-center-message-background-unread columns" name="notificationElement">
																	</c:when>																
																	<c:otherwise>
																		<div class="border-blue notification-center-message-background-read columns" name="notificationElement">
																	</c:otherwise>
																</c:choose>		
																<br>
																<div class="small-1 un-padding columns">
																<c:choose>
																	<c:when test="${notification.flightChangeType == 0}">
																		<i class="fa fa-money"></i>
																	</c:when>
																	<c:when test="${notification.flightChangeType == 1}">
																		<i class="fa fa-clock-o"></i>
																	</c:when>
																	<c:otherwise>
																		<i class="fa fa-tags"></i>
																	</c:otherwise>
																</c:choose>																
																</div>
																<c:choose>
																	<c:when test="${notification.flightChangeType == 0}">
																		<div class="small-14 un-padding columns">
																			<span class="notification-center-message" onclick="submitToSubscribe('${notification.id}','${notification.flightId}', this)"><a>Flight <strong>${notification.flightRoute}</strong> depart at ${fn:substring(notification.flightDepartureTime,fn:indexOf(notification.flightDepartureTime, " "), fn:length(notification.flightDepartureTime))} ${fn:substring(notification.flightDepartureTime,0,fn:indexOf(notification.flightDepartureTime, " "))} has change price from <input name="inputHiddenNotification" type="hidden" value="${notification.oldPrice}"> <font name="priceNotification">${notification.oldPrice}</font> <font name="codeCurrencyNotification">${notification.currencyCode}</font> to <input name="inputHiddenNotification" type="hidden" value="${notification.newPrice}"> <font name="priceNotification">${notification.newPrice}</font> <font name="codeCurrencyNotification">${notification.currencyCode}</font></a></span>
																			<br>
																			<span class="notification-center-time">${notification.driftTime}</span>										
																		</div>	
																	</c:when>
																	<c:when test="${notification.flightChangeType == 1}">
																		<div class="small-14 un-padding columns">
																			<span class="notification-center-message" onclick="submitToSubscribe('${notification.id}','${notification.flightId}',this)"><a>Flight <strong>${notification.flightRoute}</strong> depart at ${fn:substring(notification.flightDepartureTime,fn:indexOf(notification.flightDepartureTime, " "), fn:length(notification.flightDepartureTime))} ${fn:substring(notification.flightDepartureTime,0,fn:indexOf(notification.flightDepartureTime, " "))} has changed schedule</a></span>
																			<br>
																			<span class="notification-center-time">${notification.driftTime}</span>
																		</div>	
																	</c:when>
																	<c:otherwise>
																		<div class="small-14 un-padding columns">
																			<span class="notification-center-message" onclick="submitToSubscribe('${notification.id}','${notification.flightId}',this)"><a>Flight <strong>${notification.flightRoute}</strong> depart at ${fn:substring(notification.flightDepartureTime,fn:indexOf(notification.flightDepartureTime, " "), fn:length(notification.flightDepartureTime))} ${fn:substring(notification.flightDepartureTime,0,fn:indexOf(notification.flightDepartureTime, " "))} has change price from <input name="inputHiddenNotification" type="hidden" value="${notification.oldPrice}"> <font name="priceNotification">${notification.oldPrice}</font> <font name="codeCurrencyNotification">${notification.currencyCode}</font> to <input name="inputHiddenNotification" type="hidden" value="${notification.newPrice}"> <font name="priceNotification">${notification.newPrice}</font> <font name="codeCurrencyNotification">${notification.currencyCode}</font> and schedule</a></span>
																			<br>
																			<span class="notification-center-time">${notification.driftTime}</span>																		
																		</div>	
																	</c:otherwise>
																</c:choose>															
																<div class="small-1 un-padding columns">																
																	<a href="#"><i class="fa fa-trash-o" onclick="requestToDeleteOne('${notification.id}',this)" id="iconTrash"></i></a>
																</div>													
															</div>														
														</div>
													</form>
													</c:forEach>
													
												<!-- End For Each -->
												</div>
											</div>
											<div class="row border-blue" id="notyCenterBottom">
												<c:choose>
													<c:when test="${fn:length(notifications) != 0}">
														<div id="bottomWhenHaveNoty">
															<div class="small-8 columns">
																<span class="small update-profile button expand" onclick="markAllAsRead()">Mark all as read</span>
															</div>
															<div class="small-8 columns">
																<span class="small update-profile button expand" onclick="requestToDeleteAll()">Delete all</span>
															</div>	
														</div>												
													</c:when>
													<c:when test="${fn:length(taskNotifications) != 0}">
														<div id="bottomWhenHaveNoty">
															<div class="small-8 columns">
																<span class="small update-profile button expand" onclick="markAllAsRead()">Mark all as read</span>
															</div>
															<div class="small-8 columns">
																<span class="small update-profile button expand" onclick="requestToDeleteAll()">Delete all</span>
															</div>	
														</div>												
													</c:when>
													<c:otherwise>
													<div id="bottomWhenDontHaveNoty">
														<div class="columns">
															<span>There are no notification here.</span>
														</div>	
													</div>												
													</c:otherwise>
												</c:choose>	
												
											</div>
									</div>
                                </div>
                            </div>
                        </div>
                    </div>